<template>
  <div class="noticeBg">
    <el-carousel arrow="never" indicator-position="none"
                 :interval="noticeTimer" height="413px" style="width: 500px;margin:10px auto 0 auto">
      <el-carousel-item v-for="item in list" :key="item.id">
        <div class="noticeTitle">
          <div class="titLeft"></div>
          <marquee class="titMid" v-if="item.title.length>12" behavior="scroll" scrolldelay="100">
            &nbsp;{{ item.title }}
          </marquee>
          <div class="titMid" v-else>{{ item.title }}</div>
          <div class="titRight"></div>
        </div>
        <div class="noticeContent">
          {{ item.content }}
        </div>
      </el-carousel-item>
    </el-carousel>

  </div>
</template>
<script>
import mixNotice from "./mixNotice";

export default {
  mixins: [mixNotice],
}
</script>
<style lang="scss">
.noticeBg {
  position: absolute;
  top: 287px;
  padding-top: 74px;
  left: 10px;
  width: 616px;
  height: 520px;

  .noticeTitle {
    display: flex;
    width: 500px;
    margin: 0 auto 10px auto;
    justify-content: center;

    .titMid {
      max-width: 420px;
      overflow: hidden;
      min-width: 100px;
      line-height: 77px;
      text-align: center;
      font-size: 40px;
      font-weight: bold;
      text-shadow: black 1px 1px 1px;
      height: 77px;
      background: url("@/assets/noticeMiddle.png") repeat;
    }

    .titLeft {
      width: 40px;
      height: 77px;
      background: url("@/assets/noticeLeft.png") no-repeat;
    }

    .titRight {
      width: 40px;
      height: 77px;
      background: url("@/assets/noticeRight.png") no-repeat;
    }
  }

  .noticeContent {
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    text-align: left;
    text-indent: 60px;
    width: 500px;
    height: 326px;
    margin: 0 auto;
    overflow: hidden;
  }
}
</style>